<!DOCTYPE html>
<html>

<head>
    <title>菜单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- js -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/vue.js"></script>
    <!-- //js -->


    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
</head>

<body>
    <div id="app">
        <!-- header -->
    <div class="header">
        <div class="container">
            <div class="header-nav">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
                    </div>
                    <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="hvr-bounce-to-bottom "><a href="index.html">主页</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="about.html">关于</a></li>
                            <li class="hvr-bounce-to-bottom active"><a href="menu.html">菜谱</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="blog.html">论坛交流</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="contact.html">发布</a></li>
                            <li class="hvr-bounce-to-bottom "><a href="login.html" v-if="username==null">登录</a></li>
                            <li class="hvr-bounce-to-bottom"><a @click="logout"  >{{username}}</a></li>
                        </ul>
                    </div>

                </nav>
            </div>
        </div>
    </div>
    <!-- //header -->
    <!-- //header -->
    <!-- menu -->
    <div class="menuche">
        <div class="container" v-if="foods.length>0">
            <div class="menu1" v-for="item in foods" :key="item.id" >
                <div class="menu-left">
                    <img :src="item.img_url" alt="" class="img-responsive" />
                </div>
                <div class="menu-right">
                    <h3>{{item.food_name}}</h3>
                    <p>{{item.type}}</p>
                    <ul class="list ins1">
                        <li>{{item.ingredient}}
                        </li>
                        <li>距离：{{item.distance}}km
                        </li>
                    </ul>
                    <div class="more">
                        <a :href="'./pages/menu/menuDisplay1.html?id='+item.id">了解更多</a>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
           
            
        </div>
        <div v-else style="text-align: center;">
            <a href="index.html">没有咯~试试重新搜索吧~</a>
        </div>
    </div>
    <!-- //menu -->
    <!--- footer --->
    <div class="footer">
        <div class="container">
            <div class="footer-grids">
                <div class="col-md-3 footer-grid">
                    <h3>关于我们</h3>
                </div>
                <div class="col-md-3 footer-grid">
                    <h3>用户协议</h3>
                </div>
                <div class="col-md-3 footer-grid">
                    <h3>隐私政策</h3>
                </div>
                <div class="col-md-3 footer-grid">
                    <h3>客户端下载</h3>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <div class="clear"> </div>
    <div class="copy-right">
        <p>Copyright &copy; 2022.美食网站版权所有</p>
    </div>
    <!--- //footer --->
    <!-- for bootstrap working -->
    <script src="js/bootstrap.js">
    </script>
    <!-- //for bootstrap working -->
    </div>
</body>
<script>
     new Vue({
        el:"#app",
        data:{
            hello:"helloWorld",
            id:"",
            foods:[
                {
                    distance:""
                }
            ],
            query:"",
            username:"",
            latitude:"",
            longitude:""
        },
        // 创建就运行
        async created() {
            await this.getLocation()
            this.isLogin()
            this.getIdFromUrl()
            this.getData()
        },
        // 方法
        methods: {
            //获取经纬度
            async getLocation(){
                return new Promise((resolve, reject) => {
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(position => {
                            this.latitude = position.coords.latitude;
                            this.longitude = position.coords.longitude;
                            console.log(this.latitude, this.longitude);
                            resolve(); // 定位成功后resolve Promise
                        }, error => {
                            console.error('Failed to get geolocation:', error);
                            reject(error); // 出现错误时reject Promise
                        });
                    } else {
                        console.log('Geolocation is not supported by this browser.');
                        reject(new Error('Geolocation is not supported'));
                    }
                });
            },
            // 计算两个经纬度之间的距离
            calculateDistance(lat1, lon1, lat2, lon2) {
                const R = 6371; // 地球平均半径，单位为千米
                const toRadian = Math.PI / 180;

                lat1 *= toRadian;
                lon1 *= toRadian;
                lat2 *= toRadian;
                lon2 *= toRadian;

                const dLat = lat2 - lat1;
                const dLon = lon2 - lon1;

                const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                        Math.cos(lat1) * Math.cos(lat2) *
                        Math.sin(dLon / 2) * Math.sin(dLon / 2);
                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

                return (R * c).toFixed(4); // 返回距离，单位为千米
            },
            // 退出登录
            logout(){
                sessionStorage.clear()
                window.location.reload()
            },
            //判断是否登录
            isLogin(){
                this.username = sessionStorage.getItem("username")
            },
            // 从url获取id
            getIdFromUrl() {  
                const searchParams = new URLSearchParams(window.location.search);  
                this.id = searchParams.get('id');  
                this.query = searchParams.get('query'); 
            },
            
           async getData(){
                const response =  await fetch('http://127.0.0.1:5001/food/queryMenu?id='+this.id+'&query='+this.query)
                const data = await response.json();
                // 给数据赋值
                this.foods =  data.data
                // 计算距离
                for(let i=0;i<this.foods.length;i++){
                    this.foods[i].distance = this.calculateDistance(this.latitude,this.longitude,this.foods[i].la,this.foods[i].lo)
                }
           }
        }
    }) 
</script>
</html>